import Vue from "vue"
import Vuex from "vuex"
//引入模块化的store
import cart from "./cart"
import product from "./product"
//引入持久化存储库
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)

let store = new Vuex.Store({
    //strict: true,//严格模式,警告开发者不要直接修改vuex
    //状态,组件中需要被其它组件共享使用的data属性,就放到state中
    state: {
        name: "李雷",
        age: 18,
        nickname: '小雷',
        num: 30,
        products: []
    },
    //相当于vuex的计算属性
    //对数据进行预处理
    //会接收state作为参数
    getters: {
        reverseN(state) {
            state.nickname = '小灰灰'
            return state.nickname.split('').reverse().join("")
        }
    },
    //修改state的方式
    mutations: {
        // mutation是一个函数,用于修改state
        //由一个类型(key)和一个函数组成
        //会接收state作为参数,还可以接收payload(接收传递的数据)
        //官方:mutation是变更state的唯一方式
        //通过commit来触发mutaion函数
        INCREASE: function (state, payload) {
            console.log(payload)
            state.num++
        },
        DECREASE(state) {
            state.num--
        },
        SET_PRO(state, payload) {
            state.products = payload
        }
    },
    //用于给vuex发送异步请求,提交mutation,修改state
    //为什么不在mutation发送异步请求?因为mutaion里面的逻辑需要写成同步的,不然调试工具vue-devtool检测不到数据变化
    //action和mutation差不多,由一个类型和一个函数组成,不同的是action接受的是context对象
    //使用store.dispatch来触发action
    actions: {
        FETCH_PRO(context, payload) {
            console.log(context)
            fetch('http://chst.vip/data/index.json')
                .then(body => body.json())
                .then(res => {
                    // console.log(res)
                    // context.commit('SET_PRO',res.data)
                    context.state.products = res.data;
                })
        }
    },
    //store模块化
    modules: {
        cart,
        product
    },
    //vuex的插件模式 plugins
    plugins: [
        createPersistedState({
            //存储的方式
            storage: window.localStorage,
            //存储对应的key
            key: 'nick',
            //存储哪个字段
            paths: ['nickname','product.products']
        })
    ]
})

export default store